﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/text.css" rel="stylesheet" type="text/css" />
<link href="css/grid_960_16_col.css" cssMode="960" rel="stylesheet" type="text/css" />
<link href="css/global.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<script type="text/javascript">
$(document).ready(function () {
        jpInit();
    });
</script>
<style type="text/css">
.testingcss{
	box-shadow:1px 1px 2px rgba(0, 0, 0, 0.12);
	border:5px dotted #FFF;
}

</style>
<title>1200px Testing</title>
</head>

<body>
<div class="top">
	<div class="container_16">
		<div class="grid_16">
			<a href="#" class="logo"></a>
			<div class="menu_links">
				<a href="#" class="menu_link">HOME</a>
				<a href="#" class="menu_link">ALL BRANDS</a>
				<a href="#" class="menu_link">E-GREETINGS</a>
				<a href="#" class="menu_link">NEW ARRIALS</a>

			</div>
			<div class="toptip">
				<div class="toptip_item rightfloat">
					<div class="toptip_wrap radiusbottomright_4px">
						<span class="toptip_label leftfloat">Currencies <strong class="white">$USD</strong></span>
						<div class="ddl_btn"></div>
					</div>
				</div>
				
				<div class="toptip_item rightfloat">
					<div class="toptip_wrap radiusbottomleft_4px">
						<div class="toptip_label">Cart Items <a href="#" class="toptip_label_number green">4</a></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="top_bar realshadow_bottom radiusbottomleft_4px radiusbottomright_4px">
	<div class="container_16">
		<div class="grid_16">
			<div class="search_bar radiusall_4px">
				<input type="text" class="search_txt green"/>
				<input type="button" class="search_btn radiusall_2px" value="Find"/>
			</div>
			<div class="login_bar">
				<div class="login_links">
					<a href="#" class="bold">Join us</a>
					<span> - or - </span>
					<a href="#" class="bold">Log in</a>				
				</div>
				<a href="#" style="margin-top:15px;margin-left:8px;display:inline-block;background:url(img/facebook.png);width:150px;height:22px;"></a>
			</div>
			
		</div>
	</div>
</div>

<div class="clear_30px"></div>

<div class="container_16">
	<div class="grid_16"><h1>Shopping Cart</h1></div>
	<div class="clear_10px"></div>
	<div class="grid_8">
		<div class="testingcss whitetransparentbg70perc radiusall_4px" style="border-style:solid">
		<div class="paddingbox10px">
			<div style="padding:4px;background:red">
				<p><strong>Packaging 1</strong></p>
				<div style="background:gray;margin:5px 0;color:#FFF">
				Item 1; 5pc; $5 (可拖动)
				</div>
				<div style="background:gray;margin:5px 0;color:#FFF">
				Item 2; 2pc; $5 (可拖动)  <div>品牌货（提示产生了额外费用）</div>
				</div>
				<div style="background:gray;margin:5px 0;color:#FFF">
				Item 3; 1pc; $3 (可拖动)
				</div>
				<div style="background:lightgray;margin:5px 0;">
				DHL运输 价格
				</div>
				
				<div>
				这个包裹送到的运输地址
				</div>
			</div>
			<div class="clear"></div>
			<div style="padding:4px;background:yellow">
				<p><strong>Packaging 2</strong></p>
				<div style="background:gray;margin:5px 0;color:#FFF">
				Item 4; 1pc; $3 (可拖动)
				</div>
				<div style="background:gray;margin:5px 0;color:#FFF">
				Item 5; 1pc; $3 (可拖动)
				</div>
				<div style="background:lightgray;margin:5px 0;">
				Hongkong post 免运费
				</div>
				<div>
				这个包裹送到的运输地址
				</div>

			</div>
			<div class="clear"></div>
			<div style="padding:4px;background:fuchsia">
				<p><strong>Packaging 2</strong></p>
				<div style="background:gray;margin:5px 0;color:#FFF">
				Item 6; 1pc; $3 (可拖动)
				</div>
				<div style="background:gray;margin:5px 0;color:#FFF">
				Item 7; 1pc; $3 (可拖动) 虽然是品牌货但是EMS无额外费用
				</div>
				<div style="background:lightgray;margin:5px 0;">
				EMS
				</div>
				<div>
				这个包裹送到的运输地址
				</div>

			</div>
			<button>+ Add Packaging for New Address</button>
			</div>
			<div class="clear"></div>
		</div>
	</div>
	
	<div class="grid_4">
		<div class="testingcss radiusall_4px whitetransparentbg30perc">
			<div class="paddingbox10px">
			<h2>Trash Bin <span style="font-size:0.5em !important;color:gray">(drag and drop)</span></h2>
			<div class="clear_5px"></div>
			<a style="border:2px #FFF solid;display:inline-block;margin:0 3px 10px 3px;" href="#"><img width="72" src="http://thumbs1.ebaystatic.com/m/mf88mB523VXt_gWOwnh2ofQ/140.jpg"/></a>
			<a style="border:2px #FFF solid;display:inline-block;margin:0 3px 10px 3px;" href="#"><img width="72" src="http://thumbs2.ebaystatic.com/m/mnnb2L2xwSqFOJj-T2hwXXg/140.jpg"/></a>
			<a style="border:2px #FFF solid;display:inline-block;margin:0 3px 10px 3px;" href="#"><img width="72" src="http://thumbs3.ebaystatic.com/m/mp6ZgDOspls2gtKHenfUJ4g/140.jpg"/></a>
			<a style="border:2px #FFF solid;display:inline-block;margin:0 3px 10px 3px;" href="#"><img width="72" src="http://thumbs3.ebaystatic.com/m/mp6ZgDOspls2gtKHenfUJ4g/140.jpg"/></a>
			<div class="clear_15px"></div>
			</div>
			<div style="background:#FFF;text-align:center;font-weight:bold;padding:5px;">
				<p class="lightblue">Items will be cleared automatically.</p>
			</div>
		</div>
		<div class="clear"></div>
		
	</div>
	

	
	
	
	<!--
	<div class="clear_20px"></div>
	<div class="grid_4" style="height:100px;">
		<div class="testingcss radiusall_4px"></div>
		<div class="clear"></div>
	</div>
	<div class="grid_4" style="height:100px;">
		<div class="testingcss radiusall_4px"></div>
		<div class="clear"></div>
	</div>
	<div class="grid_4" style="height:100px;">
		<div class="testingcss radiusall_4px"></div>
		<div class="clear"></div>
	</div>
	<div class="grid_4" style="height:100px;">
		<div class="testingcss radiusall_4px"></div>
		<div class="clear"></div>
	</div>

	<div class="clear_20px"></div>
	<div class="grid_4" style="height:100px;">
		<div class="testingcss radiusall_4px"></div>
		<div class="clear"></div>
	</div>
	<div class="grid_4" style="height:100px;">
		<div class="testingcss radiusall_4px"></div>
		<div class="clear"></div>
	</div>
	
	<div class="grid_8" style="height:100px;">
		<div class="testingcss radiusall_4px"></div>
		<div class="clear"></div>
	</div>
	<div class="clear_20px"></div>
	<div class="grid_12" style="height:100px;">
		<div class="testingcss radiusall_4px"></div>
		<div class="clear"></div>
	</div>
	
	<div class="grid_4" style="height:100px;">
		<div class="testingcss radiusall_4px"></div>
		<div class="clear"></div>
	</div>
	<div class="clear_20px"></div>
	<div class="grid_16" style="height:100px;">
		<div class="testingcss radiusall_4px"></div>
		<div class="clear"></div>
	</div>
-->
	
	<div class="clear_20px"></div>
	

</div>
<div class="clear_30px"></div>
</body>

</html>
